<template>
  <div class="card info-box" v-if="loading">
    <div class="u-font-bold u-m-b-10 u-m-l-4 u-text-left u-font-14">数据总计</div>
    <van-row gutter="10">
      <van-col span="6">
        <div class="item u-flex-col">
          <span class="u-font-18">{{ infoTotal.win + infoTotal.lose }}</span>
          <span class="u-m-t-8 u-font-12 u-type-info">总场次</span>
        </div>
      </van-col>
      <van-col span="6">
        <div class="item u-flex-col">
          <span class="u-font-18">{{ infoTotal.win }}</span>
          <span class="u-m-t-8 u-font-12 u-type-info">胜</span>
        </div>
      </van-col>
      <van-col span="6">
        <div class="item u-flex-col">
          <span class="u-font-18">{{ infoTotal.lose }}</span>
          <span class="u-m-t-8 u-font-12 u-type-info">负</span>
        </div>
      </van-col>
      <van-col span="6">
        <div class="item u-flex-col">
          <span class="u-font-18">
            {{
              (
                (infoTotal.win / (infoTotal.lose + infoTotal.win)) *
                100
              ).toFixed(1)
            }}%
          </span>
          <span class="u-m-t-8 u-font-12 u-type-info">胜率</span>
        </div>
      </van-col>
    </van-row>
    <van-row gutter="10">
      <van-col span="6">
        <div class="item u-flex-col">
          <span class="u-font-18">
            {{
              (infoTotal.kills / (infoTotal.lose + infoTotal.win)).toFixed(1)
            }}
          </span>
          <span class="u-m-t-8 u-font-12 u-type-info">场均击杀</span>
        </div>
      </van-col>
      <van-col span="6">
        <div class="item u-flex-col">
          <span class="u-font-18">
            {{
              (infoTotal.deaths / (infoTotal.lose + infoTotal.win)).toFixed(1)
            }}
          </span>
          <span class="u-m-t-8 u-font-12 u-type-info">场均死亡</span>
        </div>
      </van-col>
      <van-col span="6">
        <div class="item u-flex-col">
          <span class="u-font-18">
            {{
              (infoTotal.assists / (infoTotal.lose + infoTotal.win)).toFixed(1)
            }}
          </span>
          <span class="u-m-t-8 u-font-12 u-type-info">场均助攻</span>
        </div>
      </van-col>
      <van-col span="6">
        <div class="item u-flex-col">
          <span class="u-font-18">
            {{
              (infoTotal.kda / (infoTotal.lose + infoTotal.win)).toFixed(1)
            }}
          </span>
          <span class="u-m-t-8 u-font-12 u-type-info">场均kda</span>
        </div>
      </van-col>
    </van-row>
    <van-row gutter="10">
      <van-col span="6">
        <div class="item u-flex-col">
          <span class="u-font-18">
            {{
              (infoTotal.last_hits / (infoTotal.lose + infoTotal.win)).toFixed(
                1
              )
            }}
          </span>
          <span class="u-m-t-8 u-font-12 u-type-info">场均正补</span>
        </div>
      </van-col>
      <van-col span="6">
        <div class="item u-flex-col">
          <span class="u-font-18">
            {{
              (infoTotal.denies / (infoTotal.lose + infoTotal.win)).toFixed(1)
            }}
          </span>
          <span class="u-m-t-8 u-font-12 u-type-info">场均反补</span>
        </div>
      </van-col>
      <van-col span="6">
        <div class="item u-flex-col">
          <span class="u-font-18">
            {{
              (
                infoTotal.gold_per_min /
                (infoTotal.lose + infoTotal.win)
              ).toFixed(1)
            }}
          </span>
          <span class="u-m-t-8 u-font-12 u-type-info">场均GPM</span>
        </div>
      </van-col>
      <van-col span="6">
        <div class="item u-flex-col">
          <span class="u-font-18">
            {{
              (infoTotal.xp_per_min / (infoTotal.lose + infoTotal.win)).toFixed(
                1
              )
            }}
          </span>
          <span class="u-m-t-8 u-font-12 u-type-info">场均XPM</span>
        </div>
      </van-col>
    </van-row>
    <van-row gutter="10">
      <van-col span="6">
        <div class="item u-flex-col">
          <span class="u-font-18">
            {{
              (
                infoTotal.hero_damage /
                (infoTotal.lose + infoTotal.win)
              ).toFixed(1)
            }}
          </span>
          <span class="u-m-t-8 u-font-12 u-type-info">英雄伤害</span>
        </div>
      </van-col>
      <van-col span="6">
        <div class="item u-flex-col">
          <span class="u-font-18">
            {{
              (
                infoTotal.tower_damage /
                (infoTotal.lose + infoTotal.win)
              ).toFixed(1)
            }}
          </span>
          <span class="u-m-t-8 u-font-12 u-type-info">防御塔伤害</span>
        </div>
      </van-col>
      <van-col span="6">
        <div class="item u-flex-col">
          <span class="u-font-18">
            {{
              (
                infoTotal.hero_healing /
                (infoTotal.lose + infoTotal.win)
              ).toFixed(1)
            }}
          </span>
          <span class="u-m-t-8 u-font-12 u-type-info">英雄治疗</span>
        </div>
      </van-col>
      <van-col span="6">
        <div class="item u-flex-col">
          <span class="u-font-18">
            {{
              (
                infoTotal.actions_per_min /
                (infoTotal.lose + infoTotal.win)
              ).toFixed(1)
            }}
          </span>
          <span class="u-m-t-8 u-font-12 u-type-info">小地图信号</span>
        </div>
      </van-col>
    </van-row>
  </div>

  <div class="card info-box u-flex u-row-center" style="height:293px" v-else>
    <van-loading />
  </div>
</template>
<script setup>
import { ref, computed, defineProps, onBeforeMount } from "vue";
import {
  getPlayersWl,
  getPlayerTotals,
} from "@/api/player.js";
import { useStore } from 'vuex'
const store = useStore()
const props = defineProps({
  accountId: {
    type: [String, Number]
  }
})
const infoTotal = computed(() => store.getters.infoTotal)
const loading = ref(false)
onBeforeMount(() => {
  if (Object.keys(infoTotal.value).length > 0) loading.value = true
  Promise.all([
    getPlayersWl(props.accountId),
    getPlayerTotals(props.accountId),
  ])
    .then((resList) => {
      let obj = {};
      resList[1].forEach((element) => {
        obj[element.field] = element.sum;
      });
      Object.assign(resList[0], obj);
      store.commit('player/SET_INFO_TOTAL', resList[0])
      loading.value = true;
    })
    .catch((e) => {
      loading.value = true;
      console.log(e);
    });
});
</script>
<style lang="scss" scoped>
.info-box {
  padding: 10px 6px;
}
.card {
  background: #ffffff;
  overflow: hidden;
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
.item {
  background: #efefef;
  padding: 6px 4px;
  border-radius: 8px;
  margin-bottom: 10px;
}
</style>